<template>
  <div class="userList back-white">
    <div>
      <page-title>用户列表</page-title> 
    </div>
    <div class="search-box">
      <el-input class="search-input" v-model="keywordSearch" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="subSeach(1)">搜索</el-button>
      <el-button type="primary" @click="subSeach(2)">全部用户</el-button>
      <el-button type="primary" @click="subSeach(3)">机器人</el-button>
      <el-button type="primary" @click="subSeach(4)">真人</el-button>
    </div>
    <el-container>
      <el-main> 
        <div class="x-item x-item-none back-white">
            <el-table border :data="userData">  
                <el-table-column label="ID" prop="id" width="100px"></el-table-column>
                <el-table-column label="注册时间" prop="create_at"></el-table-column> 
                <el-table-column label="昵称" prop="nick_name" width="120px">
                    <template slot-scope="scope"> 
                        <div class="text-center">{{scope.row.nick_name}}</div>
                        <div  class="text-center">{{scope.row.robot?'（机器人）':''}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="性别" prop="sex_text" width="50px"></el-table-column>
                <el-table-column label="年龄" prop="age" width="50px"></el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column> 
                <el-table-column label="工作" prop="industry"></el-table-column>
                <!-- <el-table-column label="学校" prop="school"></el-table-column>  -->
                <el-table-column label="关于我" prop="introduce"></el-table-column>  
                <el-table-column label="操作" prop="status">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" v-if="scope.row.status == 1" @click="toggleAccount(0,scope.row.uuid)">启用</el-button>
                        <el-button type="text" class="redColor" size="small" v-if="scope.row.status == 0" @click="toggleAccount(1,scope.row.uuid)">禁用</el-button> 
                        <el-button type="text" size="small"  @click=" openEdit(scope.row)">修改</el-button>
                        <el-button type="text" size="small"  @click=" jurisdiction(scope.row)">权限</el-button>
                        <el-button type="text" size="small"  @click=" deleteUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          <div class="pdtb075 tc"> 
            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageChange" 
              :page-sizes="[40, 60 , 80 , 100]"
              :page-size="40"
              layout="sizes, prev, pager, next"
              :total="pageCount">
            </el-pagination>
          </div>
          </div>
      </el-main>
    </el-container>
    <!--修改详情-->
    <el-dialog title="修改用户信息"  center :visible.sync="dialogFormVisible" width="645px">
        <el-form :model="editUserInfo">
            <el-form-item label="ID" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.id" autocomplete="off" :disabled="true"></el-input>
            </el-form-item> 
            <el-form-item label="昵称" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.nick_name" autocomplete="off" placeholder="未填昵称"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="100px">
                <el-select class="edit-input" v-model="editUserInfo.sex" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.age" autocomplete="off" :disabled="true"  placeholder="未填年龄"></el-input>
            </el-form-item>
            <el-form-item label="手机号" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.phone" autocomplete="off" :disabled="true"  placeholder="未填手机号"></el-input>
            </el-form-item>
            <el-form-item label="工作" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.industry" autocomplete="off"  placeholder="未填工作"></el-input>
            </el-form-item>
            <el-form-item label="学校" label-width="100px">
                <el-input class="edit-input" v-model="editUserInfo.school" autocomplete="off"  placeholder="未填学校"></el-input>
            </el-form-item>
            <el-form-item label="关于我" label-width="100px">
                <el-input class="edit-input" type="textarea"
                    :rows="2" v-model="editUserInfo.introduce" autocomplete="off"  placeholder="未填关于我"></el-input>
            </el-form-item> 
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editList">修 改</el-button>
        </div>
    </el-dialog>
    <!--权限设置-->
    <el-dialog title="权限设置"  center :visible.sync="dialogLimit" width="500px">
        <div class="text-left limit-box">
          <p>
            <el-checkbox v-model="userLimitForm.forbid_show" >禁止该用户在 <b>鲜萝卜</b> 中显示</el-checkbox> 
          </p>
          <p>
            <el-checkbox v-model="userLimitForm.forbid_video" >禁止该用户发表的 <b>视频</b> 展示在视频列表</el-checkbox> 
          </p>
          <p>
            <el-checkbox v-model="userLimitForm.forbid_question" >禁止该用户发表的 <b>问答</b> 展示在问答列表</el-checkbox> 
          </p>
          <p>
            <el-checkbox v-model="userLimitForm.forbid_square" >禁止该用户发表的 <b>视频、日志</b> 展示在广场列表</el-checkbox> 
          </p>
        </div>
        <div slot="footer" class="dialog-footer"> 
            <el-button @click="dialogLimit = false">取 消</el-button>
            <el-button type="primary" @click="subLimit">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
        keywordSearch:'', 
        is_robot:2,  //0.真人 1.机器人 2.全部
        userData: [], //用户列表
        pageCount: 0, //总数
        curPage:1, //当前页数
        pageSize:40, //一页显示多少条

        dialogFormVisible:false,
        editUserInfo:{
          age: '',
          industry: "",
          introduce: "",
          nick_name: "",
          phone: "",
          school: "",
          sex: '',
          sex_text:'',
          status: 0,
          uuid: "",
          wechat: false,
        },
        dialogLimit:false,
        userLimitForm:{
          user_uuid:'',
          forbid_show:false,
          forbid_video:false,
          forbid_question:false,
          forbid_square:false,
        }
      }
    },
    created(){
      this.getUserListData();
    },
    methods:{
      // 删除用户
      deleteUser({uuid}) {
        let vm = this
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.userDeleteFun({uuid}).then(res=>{
            if(res.data.code === 300000) {
              vm.$message({
                type: 'success',
                message: '删除成功!'
              });
              vm.getUserListData()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      subSeach(val){
        if(val==1){
          this.curPage=1;
          this.getUserListData();
          // if(this.keywordSearch){
            
          // }else{
          //   this.$message({
          //     showClose: true,
          //     message: '请输入关键字',
          //     type: 'warning'
          //   });
          // } 
        }else if(val==2){
          this.is_robot=2;
          this.keywordSearch='';
          this.getUserListData();
        }else if(val==3){
          this.is_robot=1;
          this.keywordSearch='';
          this.getUserListData();
        }else if(val==4){
          this.is_robot=0;
          this.keywordSearch='';
          this.getUserListData();
        }
      },
      getUserListData(){ //获取用户列表数据
        let vm = this;
        let body={
          page:vm.curPage, //当前页数
          size:vm.pageSize,  //一页显示多少条
          keyword:vm.keywordSearch,
          is_robot:vm.is_robot,
        }
        api.getUserList(body).then(res=>{
            if(res.data.code==300000){
              vm.userData=res.data.data.data;
              if(res.data.data.data){
                vm.userData.forEach((item,index)=>{
                  item.sex==1?item.sex_text='男':item.sex==1?item.sex_text='女':'未知';
                  if(!item.industry){
                    item.industry='未填'
                  }
                  if(!item.introduce){
                    item.introduce='未填'
                  } 
                  if(!item.phone){
                    item.phone='未填'
                  } 
                })
              }
              vm.pageCount=res.data.data.info.total;
            }
        })
      },
      // 当前页数
      pageChange(e){
        this.curPage = e;
        this.getUserListData();
      },
      pageSizeChange(e){
        this.pageSize=e;
        this.getUserListData();
      },
      toggleAccount(status,uuid){ //启用/禁用账号
        let vm = this;
        let body = {
          uuid:uuid,
          status:parseInt(status)
        };
        api.editForbidden(body).then((res) => {
          if(res.data.code == 300000){
            vm.getUserListData();
          } 
        })
      },
      //跳转到编辑
      openEdit(item){ 
        this.dialogFormVisible=true;
        this.editUserInfo={
          age:item.age,
          industry: item.industry=='未填'?item.industry='':item.industry,
          introduce: item.introduce=='未填'?item.introduce='':item.introduce,
          nick_name: item.nick_name,
          phone: item.phone=='未填'?item.phone='':item.phone,
          school: item.school,
          sex: String (item.sex),
          sex_text:item.sex_text,
          status:item.status,
          uuid: item.uuid,
          wechat: item.wechat
        }
      },
      //权限
      jurisdiction(item){
        this.userLimitForm={
          user_uuid:item.uuid,
          forbid_show:item.forbid_show==1?true:false,
          forbid_video:item.forbid_video==1?true:false,
          forbid_question:item.forbid_question==1?true:false,
          forbid_square:item.forbid_square==1?true:false,
        }
        this.dialogLimit=true;
      },
      //修改权限
      subLimit(){
        let vm = this;
        let body={
          user_uuid:this.userLimitForm.user_uuid,
          forbid_show:this.userLimitForm.forbid_show?1:0,
          forbid_video:this.userLimitForm.forbid_video?1:0,
          forbid_question:this.userLimitForm.forbid_question?1:0,
          forbid_square:this.userLimitForm.forbid_square?1:0,
        };
        api.forbidShows(body).then(res=>{
          if(res.data.code==300000){ 
            vm.$message({
              showClose: true,
              message: '修改成功'
            });
            vm.dialogLimit=false;
            vm.getUserListData();
          }
          // else{
          //   vm.$message({
          //     showClose: true,
          //     message: '权限设置失败'
          //   });
          // }
        });
      },
      //修改
      editList(){  
        let vm = this;
        let body={
          uuid:vm.editUserInfo.uuid,
          nick_name:vm.editUserInfo.nick_name,
          sex:parseInt(vm.editUserInfo.sex),
          introduce:vm.editUserInfo.introduce,
          age:vm.editUserInfo.age,
          industry:vm.editUserInfo.industry,
          school:vm.editUserInfo.school,
        };
        api.editUserAlter(body).then(res=>{
          if(res.data.code==300000){
            vm.$message({
              showClose: true,
              message: '修改成功'
            });
            vm.dialogFormVisible = false;
            vm.getUserListData();
          }
        }) 
      }, 
    }
  }
</script>
<style lang="scss" scoped>
    .search-box{
      padding:20px;
      .search-input{
        width:200px !important;
      }
    }
    .edit-input{
        width:410px !important;
    }
    .redColor{
      color:red !important;
    }
    .limit-box{
      padding-left:80px;
      p{
        margin-bottom:30px;
        &:last-child{
          margin-bottom:0;
        }
        b{
          color:#000;
        }
      }
    }
</style>